<template>
  <div class="text" v-loading="loadingFlag" element-loading-background="rgba(0, 0, 0, 1)" element-loading-spinner="el-icon-loading"element-loading-text="加载中……">
    <el-card class="card-header">
      <div class="card-title">以下是已为您生成了一份会议纪要，请查看以下内容，您可以点击下方编辑修改后完成下载。</div>
      <el-card class="inner-card">
        <div class="class-title">
          <div id="titleText">会议名称</div>
          <div id="contentText">{{ data.meetingName }}</div>
        </div>
        <div class="class-text">
          <div id="titleText">会议时间</div>
          <div id="contentText">{{ data.startTime }} - {{data.endTime}}</div>
        </div>
        <div class="class-text">
          <div id="titleText">参会人员</div>
          <div id="contentText">{{ data.userName }}</div>
        </div>
        <div class="class-text">
          <div id="titleText">会议内容</div>
          <div id="contentText">
            1.开场强调主题意义，指出 AI 关键作用。<br>
            2.专家阐述 AI 智联万物及创领未来潜力。<br>
            3.企业分享 AI 应用成功案例。<br>
            4.小组讨论 AI 挑战、合作与趋势。<br>
            5.总结强调重要性，鼓励共创未来。<br>
            6.开场强调主题意义，指出 AI 关键作用。<br>
            7.专家阐述 AI 智联万物及创领未来潜力。<br>
            8.企业分享 AI 应用成功案例。<br>
            9.小组讨论 AI 挑战、合作与趋势。<br>
            10.总结强调重要性，鼓励共创未来。<br>
            11.开场强调主题意义，指出 AI 关键作用。
          </div>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import {watch,onMounted,ref} from 'vue'
const data = ref('');
const loadingFlag = ref(true);

import {getMeetingDetailById} from "@/api/index.js";
import {ElMessage} from "element-plus";
const props = defineProps({
      meetingId: {
        type: String,
        default: () => { }
      }
    }
)
watch(() => props.meetingId,async () => {
  loadingFlag.value = true;
  const formData = new FormData();
  formData.append("meetingId",props.meetingId);
  getMeetingDetailById(formData).then(res => {
    if(res.code === 200){
        data.value = res.data;
        loadingFlag.value = false;
    }else{
      loadingFlag.value = false;
      ElMessage.success("加载失败")
    }
  });
})


</script>

<style lang="scss" scoped>
.text {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 50px;
  .card-header {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    resize: none;
    background: #F1EFFF;
    overflow-y: auto;

    .card-title{
      font-size: 14px;
      font-weight: 600;
    }

    .inner-card{
      margin-top: 20px;
      width: 100%;
      height: 100%;

      .class-title{
        margin-top: 5px;
      }
      .class-text{
        margin-top: 20px;
      }
    }
  }
  #titleText{
    font-size: 15px;
    font-weight: bold;
  }
  #contentText{
    margin-left: 30px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 500;
  }

}

</style>
